<template>
    <div>
      <input type="text" v-model="inputText" @focus="showPopup = true" placeholder="说点什么..." />
      
      <div class="popup" v-if="showPopup">
        <textarea v-model="inputText" placeholder="请输入内容..."></textarea>
        <div>
          <button @click="confirmInput">确认</button>
          <button @click="cancelInput">取消</button>
        </div>
      </div>
  
      <div v-if="submittedText">{{ submittedText }}</div>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const inputText = ref('');
      const submittedText = ref('');
      const showPopup = ref(false);
  
      function confirmInput() {
        submittedText.value = inputText.value;
        inputText.value = '';
        showPopup.value = false;
      }
  
      function cancelInput() {
        console.log('Cancel button clicked');
        inputText.value = '';  // 清空输入框
        showPopup.value = false; // 隐藏弹出框
      }
  
      return {
        inputText,
        submittedText,
        showPopup,
        confirmInput,
        cancelInput,
      };
    },
  };
  </script>
  